qx.Class.define("lastfmbackup.view.ProgressBar", {
  
  extend    : qx.core.Object,
  implement : lastfmbackup.view.IElement,

  properties : {
    
    progress : {
      check : "Number",
      init  : 0,
      apply : "_applyProgress"
    },
    
    status : {
      check : "String",
      init  : "",
      apply : "_applyStatus"
    }
    
  },
  
  construct : function()
  {
    this.base(arguments);
    
    this._element = q.create(this._getTemplate());
    
    this._formatter = new qx.util.format.NumberFormat();
    this._formatter.setMaximumFractionDigits(0);
    this._formatter.setPostfix("%");
  },
  
  members : {
    
    _element   : null,
    _formatter : null,
    
    
    getElement : function()
    {
      return this._element;
    },
    
    _getTemplate : function()
    {
      return [
        "<div class='progress-bar-container'>",
          "<div class='progress-status'>{0}: <span></span></div>".format(qx.locale.Manager.tr("Status")),
          "<div class='progress-bar'>",
            "<div class='meter'></div>",
            "<div class='label'></div>",
          "</div>",
        "</div>"
      ].join("");
    },
    
    _applyProgress : function(value, old)
    {
      this._element.find(".meter").animate({
        "duration"  : 500,
        "timing"    : "ease-in",
        "keep"      : 100,
        "keyFrames" : {
          0   : {"width" : Math.round(old * 255) + "px"},
          100 : {"width" : Math.round(value * 255) + "px"}
        }
      });
      this._element.find(".label").setHtml(this._formatter.format(value * 100));
    },
    
    _applyStatus : function(value)
    {
      this._element.find(".progress-status span").setHtml(value);
    }
    
  }
  
});